<template>
  <MainLayout :loading="loading" :loadingType="loadingType" :progress="progress">
    <template v-slot:form>
      <a-tabs v-model:activeKey="activeKey">
        <a-tab-pane key="maven" tab="MAVEN">
          <div class="form-container">
            <UnPackingFormMaven @finish="onMavenFinish" />
            <a-button
              v-if="finish"
              type="text"
              style="width: 100%; margin-top: 20px"
              @click="openResult"
            >
              查看结果
            </a-button>
          </div>
        </a-tab-pane>
        <a-tab-pane key="npm" tab="NPM">
          <div class="form-container">
            <UnPackingFormNpm @finish="onNpmFinish" />
            <a-button
              v-if="finish"
              type="text"
              style="width: 100%; margin-top: 20px"
              @click="openResult"
            >
              查看结果
            </a-button>
          </div>
        </a-tab-pane>
      </a-tabs>
    </template>
    <template v-slot:log>
      <log-code-mirror v-model="logContent" />
      <UnPackingResult
        v-model:visible="showResult"
        :type="activeKey"
        :stat="resultStat"
        :errorList="resultErrorList"
      />
    </template>
  </MainLayout>
</template>

<script setup>
import { ref } from 'vue'
import MainLayout from './MainLayout.vue'
import UnPackingFormMaven from './UnPackingFormMaven.vue'
import UnPackingFormNpm from './UnPackingFormNpm.vue'
import UnPackingResult from './UnPackingResult.vue'

const activeKey = ref('maven')
const loading = ref(false)
const logContent = ref(``)
const progress = ref({})
const finish = ref(false)
const showResult = ref(false)
const resultStat = ref({})
const resultErrorList = ref([])

window.electronAPI.onUnPackingLog((value) => {
  logContent.value = logContent.value + value
})

window.electronAPI.onUnPackingProgress((value) => {
  progress.value = value
})

const openResult = () => {
  showResult.value = true
}

const onMavenFinish = async (values) => {
  progress.value = {}
  loading.value = true
  logContent.value = ''
  const type = activeKey.value
  const result = await window.electronAPI.unpacking(type, values)
  loading.value = false
  resultStat.value = {
    totalCount: result.totalCount,
    errorCount: result.errorCount
  }
  resultErrorList.value = result.errorList.map(({ packageInfo, logText }) => {
    return { ...packageInfo, logText }
  })
  showResult.value = true
  finish.value = true
}

const onNpmFinish = async (values) => {
  progress.value = {}
  loading.value = true
  logContent.value = ''
  const type = activeKey.value
  const result = await window.electronAPI.unpacking(type, values)
  loading.value = false
  resultStat.value = {
    totalCount: result.totalCount,
    errorCount: result.errorCount
  }
  resultErrorList.value = result.errorList.map(({ packageInfo, logText }) => {
    return { ...packageInfo, logText }
  })
  showResult.value = true
  finish.value = true
}
</script>
<style scoped>
.form-container {
  width: 35vw;
  height: 50vh;
}
</style>
